<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{:lang('跳转提示')}</title>
    <link rel="stylesheet" href="/static/admin/font-awesome/4.5.0/css/font-awesome.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.88);
            border-radius: 6px;
            padding: 0 0 50px;
            text-align: center;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(10px);
            overflow: hidden;
            z-index: 10;
            transform: translateY(0);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .tips{
            padding: 20px 0;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color:#fff;
        }
        .container:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
            z-index: -1;
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        h1 {
            font-size: 2rem;
            font-weight: 700;
            margin: 60px auto;
            letter-spacing: -0.5px;
            background: linear-gradient(45deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }


        .countdown-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 40px;
        }

        .countdown-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(#6a11cb 0%, #2575fc 100%);
            clip-path: circle(50% at 50% 50%);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .countdown {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn {
            display: inline-block;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 16px 50px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(106, 17, 203, 0.35);
            border: none;
            cursor: pointer;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(106, 17, 203, 0.45);
        }

        .btn:hover::before {
            transform: translateX(100%);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn i {
            margin-right: 10px;
        }

        .alert-footer {
            margin: 40px auto 0;
            height: 42px;
            width: 120px
        }
        .alert-footer-icon {
            float: left
        }
        .alert-footer-text {
            float: left;
            border-left: 2px solid #EEE;
            padding: 3px 0 0 5px;
            height: 40px;
            color: #0B85CC;
            font-size: 12px;
            text-align: left
        }
        .alert-footer-text p {
            color: #7A7A7A;
            font-size: 22px;
            line-height: 18px
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

        @media (max-width: 600px) {
            .container {
                padding: 40px 25px;
            }

            h1 {
                font-size: 2.3rem;
            }

            .countdown-container {
                width: 180px;
                height: 180px;
            }

            .countdown {
                font-size: 4rem;
            }

            .btn {
                padding: 14px 40px;
                font-size: 1rem;
            }
        }

        @media (max-width: 400px) {
            h1 {
                font-size: 2rem;
            }

            .countdown-container {
                width: 150px;
                height: 150px;
            }

            .countdown {
                font-size: 3.5rem;
            }
        }

    </style>
</head>
<body>

    <div class="container">
        <p class="tips">{:lang('提示消息')}</p>
        <h1><?php echo(strip_tags($msg));?></h1>

        <div class="countdown-container">
            <div class="countdown-circle" id="circle"></div>
            <div class="countdown" id="countdown"><?php echo($wait);?></div>
        </div>

        <button id="jumpBtn" class="btn">
            <i class="ace-icon fa fa-external-link"></i> {:lang('立即跳转')}
        </button>

            <div class="alert-footer clearfix">
		<svg width="46px" height="42px" class="alert-footer-icon">
			<circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"></circle>
			<path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"></path>
			<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"></circle>
			<polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "></polygon>
		</svg>
		<div class="alert-footer-text"><p>secure</p>{:lang('安全加密')} </div>
	</div>

    </div>

    <script>
        let seconds = <?php echo($wait);?>;
        const countdownElement = document.getElementById('countdown');
        const jumpBtn = document.getElementById('jumpBtn');
        const circle = document.getElementById('circle');

        function updateCountdown() {
            countdownElement.textContent = seconds;
            const progress = 100 - ((seconds / <?php echo($wait);?>) * 100);
            circle.style.background = `conic-gradient(#6a11cb ${progress}%, #2575fc ${progress}%)`;
            seconds--;
            if (seconds < 0) {
                redirect();
            } else {
                setTimeout(updateCountdown, 1000);
            }
        }

        function redirect() {
            document.querySelector('.container').style.transform = "scale(0.95)";
            document.querySelector('.container').style.opacity = "0.8";

            setTimeout(() => {
                window.location.href = "<?php echo($url);?>";
            }, 300);
        }

        jumpBtn.addEventListener('click', () => {
            seconds = 0;
            redirect();
        });

        updateCountdown();
    </script>
</body>
</html>
